<template>
  <div>
    <el-row display="margin-top:10px">
      <el-form :inline="true" :model="apiinfo_key">
        <el-form-item label="模块名称">
          <el-input v-model="apiinfo_key.module_name" placeholder="模块名称"></el-input>
        </el-form-item>
        <el-form-item label="接口信息">
          <el-input v-model="apiinfo_key.api_suggest" placeholder="接口信息"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="apiinfo_query()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="apiinfo_list" style="width: 100%" tooltip-effect="dark" border>
        <el-table-column prop="id" label="ID" width="40px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column prop="module_name" label="模块名称" width="140px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.module_name}}</template>
        </el-table-column>
        <el-table-column prop="api_name" label="接口名称" width="140px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.api_name}}</template>
        </el-table-column>
        <el-table-column prop="api_suggest" label="接口信息" width="140px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.api_suggest}}</template>
        </el-table-column>
        <el-table-column prop="api_method" label="接口方法" width="90px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.api_method}}</template>
        </el-table-column>
        <el-table-column prop="api_url" label="接口链接" width="180px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.api_url}}</template>
        </el-table-column>
        <el-table-column prop="api_data" label="接口数据" width="340px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.api_data}}</template>
        </el-table-column>
        <el-table-column prop="api_header" label="接口头" width="180px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.api_header}}</template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row),dialogAPIFormVisible=true">修改接口信息
            </el-button>
            <el-button size="mini" @click="updateData(scope.row)">修改数据信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="apiinfo_key.currentPage"
                     :page-sizes="[5, 10, 20, 40]" :page-size="apiinfo_key.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="apiinfo_total">
      </el-pagination>
    </el-row>
    <el-dialog title="修改接口信息" :visible.sync="dialogAPIFormVisible">
      <el-form :model="apiinfo_detail">
        <el-form-item label="模块名称">
          <el-input v-model="apiinfo_detail.module_name"></el-input>
        </el-form-item>
        <el-form-item label="接口名称">
          <el-input v-model="apiinfo_detail.api_name"></el-input>
        </el-form-item>
        <el-form-item label="接口信息">
          <el-input v-model="apiinfo_detail.api_suggest"></el-input>
        </el-form-item>
        <el-form-item label="接口方法">
          <el-input v-model="apiinfo_detail.api_method"></el-input>
        </el-form-item>
        <el-form-item label="接口链接">
          <el-input v-model="apiinfo_detail.api_url"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleUpdate(apiinfo_detail.id)">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="修改数据信息" :visible.sync="dialogDataFormVisible">
      <ul class="from-wrap">
        <li class="from-item" v-for="(val,key,index) in FormValue" :key="key">
          <span class="from-label">{{key}}</span>
          <el-input class="from-input" v-model="FormValue[key]"></el-input>
        </li>
      </ul>
      <el-button size="medium" @click="editData">确定</el-button>
    </el-dialog>
  </div>
</template>


<script>
  import {getList, updateapi, apidata_info, apidata_update} from "@/api/apimanager"

  export default {
    name: "apiinfo",
    data() {
      return {
        dialogDataFormVisible: false,
        dialogAPIFormVisible: false,
        apiinfo_key: {
          currentPage: 1,
          pagesize: 10,
          module_name: '',
          api_suggest: '',
        },
        apiinfo_list: [],
        apiinfo_total: 0,
        apiinfo_detail: {
          id: '',
          module_name: '',
          api_name: '',
          api_suggest: '',
          api_method: '',
          api_url: '',
        },
        FormValue: {},
        api_id: '',
      }
    },
    created() {
      this.init_page();
    },
    methods: {
      init_page: function () {
        const data = {
          currentPage: this.apiinfo_key.currentPage,
          pagesize: this.apiinfo_key.pagesize,
          module_name: this.apiinfo_key.module_name,
          api_suggest: this.apiinfo_key.api_suggest
        }
        getList(data).then(res => {
          this.apiinfo_list = res.datas
          this.apiinfo_total = Number(res.total[0].total)
        })
      },
      editData: function (val) {
        const data = {
          id: this.api_id,
          api_data: this.FormValue
        }
        console.log(data)
        apidata_update(data).then(res => {
          alert("修改成功")
        })
      },
      updateData: function (val) {
        this.dialogDataFormVisible = true
        this.getApidata_info(val.id)
      },
      getApidata_info: function (ids) {
        const data = {
          id: ids
        }
        apidata_info(data).then(res => {
          this.FormValue = {}
          this.api_id = ids
          for (const item in res.datas) {
            this.$set(this.FormValue, item, res.datas[item])
          }
        })
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        Object.assign(this.apiinfo_key, {
          pagesize: size
        })
        this.apiinfo_key.pagesize = size;
        this.init_page()
        console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function (currentPage) {
        Object.assign(this.apiinfo_key, {
          currentPage: currentPage
        })
        this.init_page()
        console.log(this.currentPage)  //点击第几页
      },
      apiinfo_query: function () {
        Object.assign(this.apiinfo_key, {
          currentPage: 1
        })
        this.init_page()
      },
      handleEdit: function (val) {
        Object.assign(this.apiinfo_detail, {
          id: val.id,
          module_name: val.module_name,
          api_name: val.api_name,
          api_suggest: val.api_suggest,
          api_method: val.api_method,
          api_url: val.api_url,
        })
      },
      handleUpdate: function (id) {
        const data = {
          id: this.apiinfo_detail.id,
          module_name: this.apiinfo_detail.module_name,
          api_name: this.apiinfo_detail.api_name,
          api_suggest: this.apiinfo_detail.api_suggest,
          api_method: this.apiinfo_detail.api_method,
          api_url: this.apiinfo_detail.api_url,
        }
        updateapi(data).then(res => {
          alert("修改成功")
        })
        this.init_page();
        console.log(data)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .from-wrap {
    .from-item {
      list-style: none;
      display: flex;
      margin-bottom: 10px;

      .from-label {
        width: 120px;
        text-align: left;
        line-height: 36px;
        display: inline-block;
      }

      .from-input {
        margin-left: 15px;
        width: calc(100% - 160px);
      }
    }
  }
</style>
